import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// import todo from './modules/todo'
// const requireComponent = require.context('./modules',false,/\.js$/)
// console.log(requireComponent.keys())
// requireComponent.keys().forEach(item=>{
//   console.log(requireComponent(item).default)
// })

Vue.use(Vuex)

let store = new Vuex.Store({
  // state: {
  //   // 这里用来放 公用数据
  //   count:100,
  //   color:'red'
  // },
  state,
  // mutations: {
  //   // 这里放的都是一些函数  这些函数是用来修改 state中的属性的
  //   // 这里的函数怎么触发？  通过 commit触发
  //   // this.$store.commit('mutations中的函数名'，传给options的对应的参数)
  //   // commit 最多两个参数 最少一个
  //   changeCount(state,options,q){
  //     console.log(state,options,q)
  //     state.count+=options
  //   },
  //   changeColor(state,color){
  //     console.log(color)
  //     // setTimeout(() => {
  //     //   state.color = color.col
  //     // }, 2000);
  //     state.color = color.col
  //   }
  // },
  mutations,
  actions: {
    // 这里边放的也是一些函数 这个函数可以是异步的，但是这些函数要想修改state中的数据 还必须通过mutations
    // 这里的函数通过 dispatch触发  this.$store.dispatch('action函数名')
    // 这里一般用来放一些ajax请求函数
    changeColorAsync(store,options){
      console.log(store,options)
      setTimeout(() => {
        // store.commit('changeColor','pink');
        store.commit({
          type:'changeColor',
          col:'pink'
        })
      }, 3000);
    }
  },
  modules: {
    // 划分模块的
    // 若模块中的mutations或者actions 中的属性名重复  则都会执行
    // 若想要区分出来 则需要给模块上加一个 namespaced: true,
    mytodo:todo
  },
  getters:{
    // 这里放的也是一些函数 ，其实就是vuex的计算属性
    type(state){
      return state.count%2 == 0 ? "偶数" : "奇数"
    }
  }
})
export default store
